<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../index.js"></script>
    <link rel="stylesheet" type="text/css" href="../index.css">
    <script src="../js/jquery-3.7.1.js"></script>
    <!-- 引入 DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <!-- 引入 DataTables JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <title>机构管理</title>
    <style>
        .viewCard{
            width:90%;
            margin:30px auto;
            max-height: 800px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
        }
        .title p{
            width:400px;
            height: 40px;
            line-height: 40px;
            font-size: 30px;
            font-weight: 700;
            float:left;
        }
        .title div{
            width:134px;
            height:40px;
            float:right;
            background-color: #3B82F6;
            text-align: center;
            line-height: 40px;
            color:white;
            cursor: pointer;
        }
        table{
            text-align: center;
        }
        .institution_table{
            margin-top:70px;
        }
        /* 针对操作按钮容器 */
        #institution_table td:last-child .action-buttons {
            display: flex;
            justify-content: center;
            gap: 8px; /* 设置按钮间距 */
        }
        .action-buttons button {
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 5px;
            font-size: 16px;
            transition: all 0.3s;
        }

        .action-buttons button:hover {
            transform: scale(1.2);
        }

        .btn-approved { color: #17a2b8; }
        .btn-reject { color: #ffc107; }

        #institution_table td:nth-child(5){
            width:200px;
        }
        .createinstitutionBox{
            width:800px;
            height: 450px;
        }
        .popup{
            display:none;
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            background: rgba(0, 0, 0, 0.6);
        }
        .popup>.popupBox{
            width:800px;
            height: 450px;
            margin:150px auto;
            background-color: white;
            border-radius: 10px;
        }
        .close{
            float: right;
            margin: 10px;
            width:20px;
            height:32px;
            cursor: pointer;
            font-size: 20px;
            text-align: center;
            line-height: 32px;
        }
        .popupBox .title{
            padding:15px;
            border-bottom:.5px solid black;
        }
        .popupBox button{
            clear: both;
            display: block;
            width:200px;
            height:40px;
            margin:170px auto;
            background-color: #3B82F6;
            color:white;
            border:none;
            cursor:pointer;
        }
        .deleteConfirm{
            width:70%;
            height:auto;
            margin:0 auto;
        }
        .deleteConfirm p{
            width:100%;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            margin-top:90px;
        }
        .deleteConfirm span{
            color:red;
        }
        .deleteConfirm button{
            margin:100px 39px;
            display: inline-block;
        }
        .deleteConfirm>.closeBtn{
            background-color: gray;
            color:white;
        }
    </style>
</head>
<body>
<div class="viewCard">
    <div class="title">
        <p>机构管理</p>
    </div>
    <div class="institution_table">
        <table id="institution_table">
            <thead>
            <tr>
                <th>机构名称</th>
                <th>机构性质</th>
                <th>所属地区</th>
                <th>成立时间</th>
                <th>证明文件</th>
                <th>管理员姓名</th>
                <th>管理员手机号</th>
                <th>注册时间</th>
                <th>用户状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>***活动</td>
                <td>2025-5-15 15:30:50</td>
                <td>2025-5-15 20:30:50</td>
                <td>进行中</td>
                <td>***活动</td>
                <td>2025-5-15 15:30:50</td>
                <td>2025-5-15 20:30:50</td>
                <td>进行中</td>
                <td>进行中</td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="popup">
    <div class="popupBox">
        <div class="title">
            <p id="titleText"></p>
            <i class="close fa fa-times"></i>
        </div>
        <div class="popupContent"></div>
    </div>
</div>
<script src="../js/institutionManagement.js"></script>
</body>
</html>